<template>
  <view>
    <view>
      <tabControl
          :current="current"
          :values="tags"
          @clickItem="tagsChange"
          bgc="#fff"
          :fixed="true"
          :scrollFlag='true'
          :isEqually='true'
      ></tabControl>
    </view>
    <swiper
        class="swiper"
        style="height: 100%;margin-top:100rpx"
        @change='tagsChange'
        :current='current'
    >
      <swiper-item
          v-for="(itemNull,indexNull) in tags"
          :key=index
      >
        <scroll-view
            scroll-y="true"
            style="height: 100%;"
            @scrolltolower="loadMoreData"
        >
          <view
              v-if="list.data.length > 0"
              v-for="(item,index) in list.data"
              :key=item.id
              style="margin: 20rpx 16rpx 0 16rpx"
          >
            <uni-card
                :isFull="true"
                :title="'记录编号 : ' + service.html.isNullToStr(item.orderNum)"
                :extra="'活动编号 : ' + item.activityId"
            >
              <view>
                <view>
                  <view style="display: inline-block">
                    <u--image
                        :showLoading="true"
                        :lazyLoad="true"
                        :src="item.activityBanner"
                        width="95px"
                        height="95px"
                        radius="10px"
                        @click="service.previewImg([item.activityBanner])"
                    >
                      <view slot="error" style="font-size: 24rpx;">加载失败</view>
                    </u--image>
                  </view>
                  <view style="display: inline-block;vertical-align:top;margin-left:10px">
                    <view>
                      <uni-icons color="#D91B1B" type="shop-filled" size="24"></uni-icons>
                      <text
                          style="
                        vertical-align: top;
                        margin: 0 0 0 10rpx;
                        font-size: 15px;
                        color: #2d3436"
                      >
                        {{ item.merchantName }}
                      </text>
                    </view>
                    <view>
                      <uni-icons color="#ffda79" type="star-filled" size="24"></uni-icons>
                      <text
                          style="
                        vertical-align: top;
                        margin: 0 0 0 10rpx;
                        font-size: 15px;
                        color: #2d3436"
                      >
                        {{ item.activityTitle }}
                      </text>
                    </view>

                    <view v-if="!service.check.isNull(item.cost)">
                      <view
                          style="display: inline-block"
                      >
                        <u-icon
                            name="rmb"
                            color="#fbc531"
                            size="22"
                        >
                        </u-icon>
                      </view>
                      <view
                          style="display: inline-block;vertical-align: top"
                      >
                        <text style="
                      margin-left: 2px;
                      font-size: 16px;
                      font-weight: bold;color: #ffa502;"
                        >
                          {{ item.cost }}
                        </text>
                        <text style="margin-left: 5px">
                          元
                        </text>
                      </view>
                    </view>

                    <view>
                      <text class="cardLabelFont">
                        活动开始时间 :
                      </text>
                      <text style="margin-left: 2px">
                        {{ service.style.time(item.openTime, 8) }}
                      </text>
                    </view>
                  </view>
                </view>
                <u-gap height="1" bgColor="#bbb" marginTop="5" marginBottom="10"></u-gap>
                <view style="overflow: hidden;">
                  <view style="display: inline-block;">
                    <u-tag
                        :text="html.status(item.status)"
                        plain
                        plainFill
                        :type="style.status(item.status)"
                        size="large"
                    >
                    </u-tag>
                  </view>

                  <view style="float: right">
                    <view v-if="item.status === 0" style="display: inline-block;margin: 0 15rpx 0 0">
                      <u-button
                          shape="circle"
                          color="#eb4d4b"
                          plain
                          @click="cancelSignUp(item.id)"
                      >
                        <text style="font-weight: bold;letter-spacing: 2rpx">
                          取消报名
                        </text>
                      </u-button>
                    </view>
                    <view style="display: inline-block">
                      <u-button
                          plain
                          color="#6ab04c"
                          shape="circle"
                          @click="gotoDetail(item.id)"
                      >
                        <text style="font-weight: bold;letter-spacing: 2rpx">
                          查看详情
                        </text>
                      </u-button>
                    </view>
                  </view>
                </view>
              </view>
            </uni-card>
          </view>
          <u-empty
              v-if="list.data.length === 0"
              mode="history"
              icon="http://cdn.uviewui.com/uview/empty/history.png"
              width="400"
              height="400"
              text="没有合适的活动记录噢 ~"
              textSize="30"
          >
          </u-empty>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
import service from "@/utils/service";

export default {
  components: {
    tabControl
  },
  data() {
    let _vm = this;
    return {
      service: service,
      /* 当前选中的标签页下标 */
      current: 0,
      /* 标签列表 */
      tags: ['全部', '待支付', '已报名', '已签到', '已取消'],
      /* 列表对象 */
      list: {
        status: '',
        total: 0,
        pageSize: 10,
        pageNo: 1,
        data: [],
        setPageNo(v) {
          _vm.table.pageNo = v
          _vm.getList();
        },
        def() {
          _vm.list.status = '';
          _vm.list.total = 0;
          _vm.list.pageSize = 10;
          _vm.list.pageNo = 1;
        }
      },
      /* 加载对象 */
      loading: {
        // 进度
        plan: 0,
        // 阈值
        threshold: 0,
        open: true,
        step() {
          if (++this.plan >= this.threshold && _vm.loading.open) {
            try {
            } catch (e) {
              console.log(" loading.step() err :  ", e)
            } finally {
              _vm.loading.open = false;
              uni.hideLoading();
            }
          }
        }
      },
      /* 样式对象 */
      style: {
        status(v) {
          switch (v) {
            case 0:
              return "warning"
            case 1:
              return "primary"
            case 2:
              return "success"
            case -1:
              return "error"
          }
        }
      },
      html: {
        status(v) {
          switch (v) {
            case 0:
              return '待支付'
            case 1:
              return '已报名'
            case 2:
              return '已签到'
            case -1:
              return '已取消'
          }
        }
      },
      request: {
        status(v) {
          switch (v) {
            case 1:
              return 0;
            case 2:
              return 1;
            case 3:
              return 2;
            case 4:
              return -1;
            default:
              return null;
          }
        },
        listDef: {
          success(_t, res) {
            _t.list.data = res.result.list;
            _t.list.pageNo = res.result.pageNo;
            _t.list.total = res.result.total;
            _t.list.data.map(e => {
              e.activityBanner = _t.$config.URLIMAGE + e.activityBanner
              return e
            })
          },
          fail(_t, res) {
            uni.showToast({
              title: '列表加载失败 :' + res.result,
              mask: true,
              icon: 'none'
            })
          },
          complete(_t) {

          },
          init(_t) {
            return false;
          }
        }
      }
    };
  },
  methods: {
    getList(success = this.request.listDef.success,
            fail = this.request.listDef.fail,
            complete = this.request.listDef.complete,
            init = this.request.listDef.init) {
      let _t = this;
      if (init(_t)) {
        return;
      }
      let data = {}
      data.pageSize = this.list.pageSize;
      data.pageNo = this.list.pageNo;
      this.list.status = this.request.status(this.current);
      if (!service.check.isNull(this.list.status)) {
        data.status = this.list.status;
      }
      this.$axios({
        url: "user/usActivity/list",
        method: "post",
        data: data
      }).then(res => {
        console.log(" user/usActivity/list :  ", res)
        if (res.code === 0) {
          success(_t, res);
        } else {
          fail(_t, res);
        }
      }).finally(() => {
        complete(_t);
        _t.loading.step();
      })
    },
    /* 取消报名 */
    cancelSignUp(registerId) {
      let _t = this;
      uni.showLoading({
        title: '申请中.....',
        mask: true
      })
      this.$axios({
        url: "user/usActivity/cancelSignUp",
        method: "post",
        data: {
          registerId: registerId
        }
      }).then(res => {
        console.log(" user/usActivity/cancelSignUp :  ", res)
        if (res.code === 0) {
          uni.showToast({
            title: '申请成功',
            icon: 'none',
          })
          _t.getList(
              this.request.listDef.success,
              this.request.listDef.fail,
              function (_t) {},
              function (_t) {
                _t.list.pageNo = 1
                uni.showLoading({
                  title: '加载中....',
                  mask: true
                })
              });
        } else {
          uni.showToast({
            title: '申请失败 : ' + res.result,
            icon: 'none',
          })
        }
      }).finally(() => {
        _t.$nextTick(() => {
          uni.hideLoading();
        })
      })
    },
    /* 跳转详情页 */
    gotoDetail(registerId){
      uni.navigateTo({
        url: 'detail?registerId=' + registerId
      })
    },
    /* 标签改变 */
    tagsChange(v) {
      console.log("标签页改变 : ", v)
      if (!service.check.isNull(v.detail) && !service.check.isNull(v.detail.current)) {
        this.current = v.detail.current
      } else if (!service.check.isNull(v.currentIndex)) {
        this.current = v.currentIndex;
      } else {
        return;
      }
      this.getList(
          this.request.listDef.success,
          this.request.listDef.fail,
          function (_t) {
            _t.$nextTick(() => {
              uni.hideLoading();
            })
          }, function (_t) {
            _t.list.pageNo = 1
            uni.showLoading({
              title: '加载中....',
              mask: true
            })
          });
    },
    /* 滚动到底部 */
    loadMoreData(v) {
      this.getList(
          function (_t, res) {
            _t.list.pageNo = res.result.pageNo;
            _t.list.total = res.result.total;
            res.result.list.map(e => {
              e.activityBanner = _t.$config.URLIMAGE + e.activityBanner
              return e
            })
            res.result.list.forEach(e => _t.list.data.push(e))
          },
          this.request.listDef.fail,
          function (_t) {
            _t.$nextTick(() => {
              uni.hideLoading();
            })
          }, function (_t) {
            console.log(_t.list.data.length, _t.list.total)
            if (_t.list.data.length >= _t.list.total) {
              uni.showToast({
                title: '已经到底啦 ~',
                icon: "none"
              })
              return true;
            }
            _t.list.pageNo++;
            uni.showLoading({
              title: '加载中....',
              mask: true
            })
            return false;
          });
    },
  },
  onLoad() {
    // 列表
    this.loading.threshold = 1;
  },
  onShow() {
    if (this.loading.open) {
      uni.showLoading({
        title: '加载中....',
        mask: true
      });
    }
    this.getList();
  }
}
</script>

<style lang="scss">
/deep/ .swiper {
  height: 90vh !important;
}

/deep/ .uni-card--border {
  border-radius: 2px solid #EBEEF5 !important;
}

.uni-card__header-content-title {
  font-size: 28rpx !important;
  color: #2ecc71 !important;
}

.uni-card__header-extra-text {
  font-size: 26rpx !important;
  color: #70a1ff !important;
}

.cardLabelFont {
  font-size: 15px;
  font-weight: bold;
  color: #2f3542
}
</style>
